<template>
	<view>
		<view class="text-area" style="font-size: 20px">
			<text class="title">申请加入{{group_item.name}}</text>
		</view>

		<view class="padding">
           <view class="cu-list menu">
                <view class="cu-item flex">
                    <text>我的团体：</text>
                    <picker v-if="myGroupList.length" mode="selector"
						:range="myGroupList"
						range-key="name"
						:value="groupIndex"
						@change="groupChange">
                        <view class="cu-btn picker">{{myGroupList[groupIndex].name}}</view>
                    </picker>
                </view>
            </view>
        </view>

		<view class="padding">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="joinGroup">申  请</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				group_id: '',
				group_item: {},

				account_id: '',
				myGroupList: [],
				groupIndex: 0,
			}
		},
		created() {
			this.account_id = uni.getStorageSync("account_id");
			if (!this.account_id) {
				uni.showToast({
					icon: 'none',
					title: '请先登录，再点击进入本页面！',
					duration: 1000
				});
				uni.navigateTo({
					url: "/pages/user/user_login"
				});
			} else {
				this.getMyGroupList();
			}

			this.group_id = this.$route.query.group_id;
			if (this.group_id) {
				this.getOneGroup();
			} else {
				uni.showToast({
					icon: 'none',
					title: '出错了，请确认页面来源！',
					duration: 1000
				});
			}
		},
		methods: {
			getMyGroupList() {
				uniCloud.callFunction({
					name: "ha_get_group",
					data: {
						type: 0,
						account_id: this.account_id
					},
					success: ({result}) => {
						// console.log(result)
						this.myGroupList = result.data;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			getOneGroup() {
				uniCloud.callFunction({
					name: "ha_get_group",
					data: {
						type: 2,
						group_id: this.group_id
					},
					success: ({result}) => {
						// console.log(result);

						if(result.status === 0){
							this.group_item = result.data;
						}else{
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			groupChange: function(e) {
				this.groupIndex = e.target.value
			},
			joinGroup: function() {
				if (!this.myGroupList.length) {
					uni.showToast({
						icon: 'none',
						title: '没有可选择的团体！'
					});
					return
				}
				if (this.groupIndex >= this.myGroupList.length) {
					uni.showToast({
						icon: 'none',
						title: '出错了！'
					});
					return
				}
				if (this.group_id == this.myGroupList[this.groupIndex]._id) {
					uni.showToast({
						icon: 'none',
						title: '抱歉！自己不能加入自己的团体。'
					});
					return
				}

				uniCloud.callFunction({
					name: "ha_update_group",
					data: {
						type: 1,
						group_id: this.myGroupList[this.groupIndex]._id,
						parent_id: this.group_id
					},
					success: ({result}) => {
						// console.log(result);

						if ( result.status === 0 ) {
							uni.showToast({
								title: `${result.msg || "申请成功！"}`,
								duration: 1000
							});
							setTimeout(() => {
								location.reload();
							}, 1000);
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.text-area {
		text-align: center;
	}

</style>
